<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="includes :: header"></head>

<body>

<div th:replace="includes :: navi"></div>

<div class="container">
  <div class="row">
    <h1>회원 가입</h1>
  </div>
  <div class="row">
    <form class="col s12" action="#" th:action="@{/signup}" th:object="${userDto}" method="post">
      <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
      <div class="row">
        <div class="input-field col s12">
          <input id="username" type="text" class="validate" th:field="*{username}">
          <label for="username">사용자 아이디</label>
        </div>
        <div class="col s12" th:if="${#fields.hasErrors('username')}" th:errors="*{username}"></div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input id="password" type="password" class="validate" th:field="*{password}">
          <label for="password">비밀번호</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input id="confirmpassword" type="password" class="validate" th:field="*{confirmpassword}">
          <label for="confirmpassword">비밀번호확인</label>
        </div>
        <div class="col s12" th:if="${#fields.hasErrors('password')}" th:errors="*{password}"></div>
        <div class="col s12" th:if="${#fields.hasErrors('global')}" th:errors="*{global}"></div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input id="name" type="text" class="validate" th:field="*{name}">
          <label for="name">이름</label>
          <div class="col s12" th:if="${#fields.hasErrors('name')}" th:errors="*{name}"></div>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input id="email" type="email" class="validate" th:field="*{email}">
          <label for="email">이메일</label>
          <div class="col s12" th:if="${#fields.hasErrors('email')}" th:errors="*{email}"></div>
        </div>
      </div>
      <button class="btn waves-effect waves-light" type="submit" name="action">회원가입
        <i class="material-icons right">send</i>
      </button>
    </form>
  </div>
</div>

<div th:replace="includes :: footer"></div>

</body>
</html>